{% extends 'account/base.html' %}
{% load static %}

{% block css %}
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 12px;
        }
    </style>
{% endblock %}

{% block content %}
<div class="bg-white">
    <div class="container">
        <div class="row justify-content-center align-items-center d-flex vh-100 account">
            <div class="col-md-4 mx-auto">
                <div class="osahan-login py-4">
                    <div class="text-center mb-4">
                        <a href="index.html"><img src="img/fav.png" alt=""></a>
                        <h5 class="font-weight-bold mt-3">Welcome Back</h5>
                        <p class="text-muted">Don't miss your next opportunity. Sign in to stay updated on your world.</p>
                    </div>

                    <form id="loginForm" method="POST" novalidate>
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == 'code' %}

                                <div class="form-row">

                                    <div class="col">
                                        <div class="form-group">
                                            <label class="mb-1" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                            <div class="position-relative icon-form-control">
                                                <i class="feather-crosshair position-absolute"></i>
                                                {{ field }}
                                                <span class="error-msg">{{ field.errors.0 }}</span>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col">
                                        <div class="form-group">
                                            <label class="mb-1">👻</label>
                                            <div class="position-relative icon-form-control">
                                                <img src="{% url 'image_code' %}" id="imageCode" title="点击更换图片">
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            {% else %}

                                <div class="form-group">
                                    <label class="mb-1" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div class="position-relative icon-form-control">
                                        {% if field.name == 'username' %}
                                            <i class="feather-smartphone position-absolute"></i>
                                        {% elif field.name == 'password' %}
                                            <i class="feather-lock position-absolute"></i>
                                        {% endif %}
                                        {{ field }}
                                        <span class="error-msg">{{ field.errors.0 }}</span>
                                    </div>
                                </div>

                            {% endif %}
                        {% endfor %}

                        <div class="custom-control custom-checkbox mb-3">
                            <input type="checkbox" class="custom-control-input" id="customCheck1">
                            <label class="custom-control-label" for="customCheck1">Remember password</label>
                            <div style="float: right;">
                                <a href="{% url 'login_sms' %}">使用短信验证码登录😀</a>
                            </div>
                        </div>

                        <button id="btnSubmit" class="btn btn-primary btn-block text-uppercase" type="button"> Sign in</button>
                    </form>



                        <div class="text-center mt-3 border-bottom pb-3">
                            <p class="small text-muted">Or login with</p>
                            <div class="row">
                                <div class="col-4">
                                    <button type="button" class="btn btn-sm btn-outline-instagram btn-block"><i
                                            class="feather-instagram"></i> Instagram
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-sm btn-outline-linkedin btn-block"><i
                                            class="feather-linkedin"></i> Linkedin
                                    </button>
                                </div>
                                <div class="col-4">
                                    <button type="button" class="btn btn-sm btn-outline-facebook btn-block"><i
                                            class="feather-facebook"></i> Facebook
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="py-3 d-flex align-item-center">
                            <a href="forgot-password.html">Forgot password?</a>
                            <span class="ml-auto"> New to Universe? <a class="font-weight-bold" href="{% url 'register' %}">Join now</a></span>
                        </div>

                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
    <script>

        $(function () {
            imageCode();
            bindClickSubmit();
        });

        function imageCode() {
            $('#imageCode').click(function () {
                var oldSrc = $(this).attr('src');
                $(this).attr('src', oldSrc + "?");  //在地址后面加问号，相当于再发一次请求。
            })
        }

        /*
        点击提交（登录）
        */
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty();
                // 收集表单中的数据（找到每一个字段）$('#regForm').serialize()
                // 数据ajax发送到后台
                $.ajax({
                    url: "{% url 'login' %}",
                    type: "POST",
                    data: $('#loginForm').serialize(), // 所有字段数据 + csrf token
                    dataType: "JSON",
                    success: function (res) {
                        if(res.status){
                            location.href = res.data;
                        }else{
                            $.each(res.error, function (key, value) {
                                $("#id_" + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
        }


    </script>
{% endblock %}